<template id="like">
  <div>
    <mt-header fixed title="猜你喜欢"></mt-header>
    <mt-search v-model="value" placeholder="搜索"></mt-search>
    <div class="like">
      <mt-swipe :auto="4000">
        <mt-swipe-item>
          <img src="https://img.alicdn.com/tfs/TB1FjZ7VWL7gK0jSZFBXXXZZpXa-520-280.png" />
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="https://img.alicdn.com/tfs/TB1FjZ7VWL7gK0jSZFBXXXZZpXa-520-280.png" />
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="https://img.alicdn.com/tfs/TB1FjZ7VWL7gK0jSZFBXXXZZpXa-520-280.png" />
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <nav>
      <div v-for="(item,index) in navimg" :key="index">
        <img :src="item.url" />
        <br />
        <p>{{item.title}}</p>
      </div>
    </nav>
    <h4>节日特惠</h4>
    <ul class="tmshop">
      <li v-for="(item,index) in list" :key="index">
        <router-link :to="item.path+'/'+item.id" :name="index">
          <div>
            <img :src="item.pic" alt />
          </div>
          {{item.con}}
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      list: [],
      navimg: [
        { url: "./src/assets/img/1.png", title: "京东超市" },
        { url: "./src/assets/img/2.png", title: "数码电器" },
        { url: "./src/assets/img/3.png", title: "京东服饰" },
        { url: "./src/assets/img/4.png", title: "京东生鲜" },
        { url: "./src/assets/img/5.png", title: "京东到家" },
        { url: "./src/assets/img/6.png", title: "充值缴费" },
        { url: "./src/assets/img/7.png", title: "9.9元拼" },
        { url: "./src/assets/img/8.png", title: "领券" },
        { url: "./src/assets/img/9.png", title: "零金贴" },
        { url: "./src/assets/img/10.png", title: "PLUS会员" }
      ]
    };
  },
  created() {
    this.get();
  },
  methods: {
    get() {
      var that = this;
      this.$http.get("./src/assets/json/shop.json").then(function(response) {
        // console.log(response);
        that.list = response.data.hot;
      });
    }
  }
};
</script>

局部css scoped

<style lang="less">
main {
  max-height: 90vh;
  overflow-x: hidden;
  margin: 0;
}
.mint-search {
  height: 43px;
  position: relative;
}
.mint-searchbar {
  padding: 3px;
}
nav {
  margin: 0 6px;
  justify-content: flex-end;
  font-size: 1vh;
  color: #555;
}
nav div {
  display: inline-block;
  width: 20%;
  text-align: center;
}
nav img {
  width: 8vh;
  height: 8vh;
}
.tmshop {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap; /* ul中的内容不换行 */
}
h4{
  text-indent: 10px;
}
.tmshop::-webkit-scrollbar {
  display: none;
}
.tmshop li {
  text-align: center;
  display: inline-block;
}
.tmshop img {
  width: 12vh;
  height: 12vh;
}
.like {
  width: 90vw;
  margin: 0px auto;
}
.like .mint-swipe-items-wrap {
  height: 48vw;
}
.like img {
  width: 90vw;
}
</style>
//修改ui组件样式的时候，不能使用局部样式  100vw是窗口宽度的100% 100vh是窗口高度100%  
520 280  
90vw vw